<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>放置示例</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

    <style>
        #person_list {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-right: -10px;
        }

        #person_list li {
            width: 25%;
            cursor: move;
            float: left;
            padding-right: 10px;
        }

        .person {
            background-color: #ffffff;
            border: 1px solid #ddd;
            padding: 5px;
            overflow: hidden;
            margin-bottom: 10px;

        }

        .person .person-title {
            background-color: #f5f5f5;
            text-align: center;
            padding: 2px;
            margin-bottom: 10px;
        }

        .person img {
            width: 100%;
            height: 120px;
            margin-bottom: 5px;
            user-select: none;
        }

        #trash_box {
            min-height: 400px;
            background-color: #f3f3f3;
            padding: 10px;
            overflow: hidden;
        }
        #trash_box ul {
            list-style: none;
            padding: 0;
        }
        #trash_box ul li {
            float: left;
            width: 50%;
        }

        #trash_box.drop-active {
            background-color: #ddd;
        }
    </style>
</head>

<body class="bg-gray">
    <div class="wrapper wrapper-container">
        <div class="row">
            <div class="col-xs-12">
                <div class="panel">
                    <div class="panel-heading">放置示例</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-8">
                                <ul id="person_list">
                                    <li>
                                        <div class="person">
                                            <div class="person-title">大美丽一号</div>
                                            <img src="./../../../static/img/avatar.jpg">
                                            <div class="person-toolbar">
                                                <a href="javascript:;" class="text-gray pull-left"><i
                                                        class="fa fa-search-plus"></i></a>
                                                <a href="javascript:;" class="text-gray pull-right del"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="person">
                                            <div class="person-title">大美丽二号</div>
                                            <img src="./../../../static/img/avatar1.jpg">
                                            <div class="person-toolbar">
                                                <a href="javascript:;" class="text-gray pull-left"><i
                                                        class="fa fa-search-plus"></i></a>
                                                <a href="javascript:;" class="text-gray pull-right del"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="person">
                                            <div class="person-title">大美丽三号</div>
                                            <img src="./../../../static/img/avatar2.jpg">
                                            <div class="person-toolbar">
                                                <a href="javascript:;" class="text-gray pull-left"><i
                                                        class="fa fa-search-plus"></i></a>
                                                <a href="javascript:;" class="text-gray pull-right del"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="person">
                                            <div class="person-title">大美丽三号</div>
                                            <img src="./../../../static/img/avatar3.jpg">
                                            <div class="person-toolbar">
                                                <a href="javascript:;" class="text-gray pull-left"><i
                                                        class="fa fa-search-plus"></i></a>
                                                <a href="javascript:;" class="text-gray pull-right del"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="person">
                                            <div class="person-title">大美丽四号</div>
                                            <img src="./../../../static/img/banner/1.jpg">
                                            <div class="person-toolbar">
                                                <a href="javascript:;" class="text-gray pull-left"><i
                                                        class="fa fa-search-plus"></i></a>
                                                <a href="javascript:;" class="text-gray pull-right del"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="col-xs-4">
                                <div id="trash_box">
                                    <p class="text-center bg-warning padding-5">回收站</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">
        $(function () {
            var personList = $("#person_list");
            var trashBox = $("#trash_box");
            $("li", personList).draggable({
                revert: "invalid", // 当未被放置时，条目会还原回它的初始位置
                cancel: "a", // 点击一个图标不会启动拖拽
                containment: "document",
                helper: "clone",
                cursor: "move",
                stack: '#person_list li'
            });

            // 让回收站可放置，接受相册的条目
            trashBox.droppable({
                accept: "#person_list > li",
                activeClass: "drop-active",
                drop: function (event, ui) {
                    deletePerson(ui.draggable);
                }
            });

            $(".person a.del").click(function(){

                deletePerson( $(this).parents("li"));
            });

            function deletePerson(person) {
                var trashList =  $("ul", trashBox).length? $("ul", trashBox):$('<ul id="trash_list"/>').appendTo(trashBox);
                person.addClass('person-trash');
                trashList.append(person);
            }

        });
    </script>
</body>

</html>